import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import MuiAccordion from '@mui/material/Accordion';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import MuiAccordionSummary from '@mui/material/AccordionSummary';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import WorkflowContext from 'contexts/WorkflowContext';
import useAccordion from '../../../../hooks/useAccordion';
import DynamicField from './DynamicField';

const AccordionField = ({ fieldsData, defaultExpandedId = null, stepIndex }) => {
  const theme = useTheme();
  const { addField } = useContext(WorkflowContext);
  const { expandedAccordion, handleAccordionChange, setExpandedAccordion } = useAccordion(defaultExpandedId);
  const handleSaveButtonClick = (currentKey) => {
    const currentIndex = fieldsData.findIndex((item) => item.key === currentKey);

    // 检查当前是否为最后一个手风琴组件
    if (currentIndex === fieldsData.length - 1) {
      // 折叠当前手风琴组件
      setExpandedAccordion(null);
    } else {
      // 否则，打开下一个手风琴组件
      const nextIndex = currentIndex + 1;
      const nextKey = fieldsData[nextIndex].key;
      setExpandedAccordion(nextKey);
    }
  };

  // Function to render a single accordion
  const renderSingleAccordion = (item) => {
    const defauleValue = item.pValue;
    // console.log('!!!!!!!!!!item', item);
    // console.log(item.displayType);
    const displayType = item.displayType;
    // console.log('@@@@@@@@@@@@@@@', defauleValue);
    return (
      <MuiAccordion
        key={item.key}
        expanded={expandedAccordion === item.key}
        disabled={item.disabled}
        onChange={handleAccordionChange(item.key)}
      >
        <MuiAccordionSummary
          expandIcon={<ExpandMoreIcon />}
          sx={{ color: theme.palette.mode === 'dark' ? 'grey.600' : 'grey.900', fontWeight: 500 }}
        >
          <Grid container spacing={2} alignItems="center">
            <Grid item xs={6}>
              {item.title}
              {item.isRequired && <span style={{ color: 'red' }}>*</span>}
            </Grid>
          </Grid>
        </MuiAccordionSummary>
        <MuiAccordionDetails>
          <Grid container spacing={2}>
            {item.type === 'complex' ? (
              item.list.map((subItem, index) => (
                <Grid item xs={10} key={index}>
                  <DynamicField {...subItem} stepIndex={stepIndex} fieldId={item.key} isComplexType nestIndex={index} />
                </Grid>
              ))
            ) : (
              <Grid item xs={10}>
                <DynamicField {...item} stepIndex={stepIndex} fieldId={item.key} />
              </Grid>
            )}
            <Grid item xs={12}>
              <Button variant="contained" color="primary" onClick={() => handleSaveButtonClick(item.key)}>
                保存
              </Button>
            </Grid>
          </Grid>
        </MuiAccordionDetails>
      </MuiAccordion>
    );
  };

  // const memoizedData = useMemo(() => fieldsData, [fieldsData]);
  // console.log('@@@@@@@@@@@@@@@@@@@@@@.AccordionField', fieldsData, fieldsData.pValue);
  return <Box sx={{ width: '100%' }}>{fieldsData.map((item) => renderSingleAccordion(item))}</Box>;
};

AccordionField.propTypes = {
  fieldsData: PropTypes.arrayOf(
    PropTypes.shape({
      key: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired,
      isRequired: PropTypes.bool,
      type: PropTypes.string,
      list: PropTypes.array,
      disabled: PropTypes.bool
    })
  ).isRequired,
  defaultExpandedId: PropTypes.string,
  stepIndex: PropTypes.number.isRequired
};

export default AccordionField;
